<template>
  <div class="gray-page resident-detail-page">
    <nav-bar title="宠物基础信息详情"></nav-bar>
    <div class="resident-detail-main page-main">
      <van-sticky class="page-scroll" :offset-top="44">
        <!-- 1：更新  2：审核  3：采集 -->
        <p class="resident-detail-time" v-if="formParams.updateTime">
          <template v-if="$route.query.queryType === '1'">上次更新时间：</template>
          <template v-if="$route.query.queryType === '2'">上次审核时间：</template>
          <template v-if="$route.query.queryType === '3'">上次采集时间：</template>
          {{ formParams.updateTime }}
        </p>
        <van-form input-align="right" :label-width="120">
          <van-collapse v-model="activeNames" :border="false">
            <van-collapse-item size="large" title="基础信息" name="1">
              <van-field
                readonly
                label-class="van-cell__title_gray"
                required
                v-model="formParams.petName"
                label="宠物姓名"
              />
              <van-field
                readonly
                label-class="van-cell__title_gray"
                required
                v-model="formParams.petType"
                label="宠物品种"
              />
              <van-field
                readonly
                label-class="van-cell__title_gray"
                required
                v-model="formParams.petSexName"
                label="宠物性别"
              />
              <van-field
                readonly
                label-class="van-cell__title_gray"
                required
                v-model="formParams.petColor"
                label="毛色"
              />
              <van-field readonly label-class="van-cell__title_gray" v-model="formParams.petAge" label="宠物年龄" />
              <van-field
                readonly
                label-class="van-cell__title_gray"
                required
                v-model="formParams.vaccineInjectionName"
                label="疫苗注射情况"
              />
              <van-field readonly label-class="van-cell__title_gray" v-model="formParams.licence" label="许可证号" />
              <van-field
                readonly
                label-class="van-cell__title_gray"
                v-model="formParams.issuedAuthority"
                label="发证机关"
              />
              <van-field readonly label-class="van-cell__title_gray" v-model="formParams.issuedTime" label="发证日期" />
              <van-field
                readonly
                label-class="van-cell__title_gray"
                required
                v-model="formParams.regionCodeName"
                label="所属场所"
              />
            </van-collapse-item>
            <van-collapse-item size="large" title="主人信息" name="2">
              <van-field
                readonly
                label-class="van-cell__title_gray"
                required
                v-model="formParams.owner"
                label="主人姓名"
              />
              <van-field
                readonly
                label-class="van-cell__title_gray"
                required
                v-model="formParams.phone"
                label="联系方式"
              />
              <van-field
                readonly
                label-class="van-cell__title_gray"
                required
                v-model="formParams.idTypeName"
                label="证件类型"
              />
              <van-field
                readonly
                label-class="van-cell__title_gray"
                required
                v-model="formParams.idCard"
                label="证件号码"
              />
              <van-field
                readonly
                label-class="van-cell__title_gray"
                required
                name="address"
                v-model="formParams.address"
                label="居住地址"
              />
              <van-field readonly label-class="van-cell__title_gray" required :label-width="300" :border="false">
                <template #label>
                  <span>上传照片</span>
                  <span class="van-field__label--tip">（登记犬只侧面全身照片）</span>
                </template>
              </van-field>
              <van-field
                readonly
                label-class="van-cell__title_gray"
                class="van-field__value--upload"
                input-align="left"
              >
                <template #input>
                  <van-uploader disabled>
                    <div class="van-uploader__input--yellow-small">
                      <van-image
                        width="82px"
                        height="102px"
                        fit="cover"
                        style="border-radius: 12px"
                        :src="$config.ImageURl + formParams.imageUrl"
                      />
                    </div>
                  </van-uploader>
                </template>
              </van-field>
            </van-collapse-item>
          </van-collapse>
          <div style="padding: 16px"></div>
        </van-form>
      </van-sticky>
    </div>
  </div>
</template>
<script>
import Resident from '@/api/resident'
export default {
  data() {
    return {
      activeNames: ['1', '2'],
      formParams: {}
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    getDetail() {
      Resident.BaseInfo.petDetail({
        code: this.$route.query.code,
        queryType: this.$route.query.queryType
      }).then(res => {
        const { status, data } = res.data
        if (status === 0) {
          this.formParams = { ...data }
          this.formParams.vaccineInjection = this.formParams.vaccinationStatus
          this.formParams.vaccineInjectionName = data.vaccinationStatusName
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@/assets/style/resident/detail.less';
</style>
